<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Main</title>

		<link rel="stylesheet" href="main.css">

		<script type="text/montage-serialization">
		{
			"owner": {
				"properties": {
					"element": {"#": "mainComponent"},
					"_newTodoForm": {"#": "newTodoForm"},
					"_newTodoInput": {"#": "newTodoField"}
				}
			},

			"todoRepetition": {
				"prototype": "montage/ui/repetition.reel",
				"properties": {
					"element": {"#": "todo-list"}
				},
				"bindings": {
					"contentController": {"<-": "@owner.todoListController"}
				}
			},

			"todoView": {
				"prototype": "ui/todo-view.reel",
				"properties": {
					"element": {"#": "todoView"}
				},
				"bindings": {
					"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
				}
			},

			"main": {
				"prototype": "matte/ui/dynamic-element.reel",
				"properties": {
					"element": {"#": "main"}
				},
				"bindings": {
					"classList.has('visible')": {
						"<-": "@owner.todos.length > 0"
					}
				}
			},

			"footer": {
				"prototype": "matte/ui/dynamic-element.reel",
				"properties": {
					"element": {"#": "footer"}
				},
				"bindings": {
					"classList.has('visible')": {
						"<-": "@owner.todos.length > 0"
					}
				}
			},

			"toggleAllCheckbox": {
				"prototype": "native/ui/input-checkbox.reel",
				"properties": {
					"element": {"#": "toggle-all"}
				},
				"bindings": {
					"checked": {"<->": "@owner.allCompleted"}
				}
			},

			"todoCount": {
				"prototype": "montage/ui/text.reel",
				"properties": {
					"element": {"#": "todo-count"}
				},
				"bindings": {
					"value": {
						"<-": "@owner.todosLeft.length"
					}
				}
			},

			"todoCountWording": {
				"prototype": "montage/ui/text.reel",
				"properties": {
					"element": {"#": "todo-count-wording"}
				},
				"bindings": {
					"value": {"<-": "@owner.todosLeft.length == 1 ? 'item' : 'items'"}
				}
			},

			"completedCount": {
				"prototype": "montage/ui/text.reel",
				"properties": {
					"element": {"#": "completed-count"}
				},
				"bindings": {
					"value": {
						"<-": "@owner.todosCompleted.length"
					}
				}
			},

			"clearCompletedContainer": {
				"prototype": "matte/ui/dynamic-element.reel",
				"properties": {
					"element": {"#": "clear-completed-container"}
				},
				"bindings": {
					"classList.has('visible')": {
						"<-": "@owner.todosCompleted.length"
					}
				}
			},

			"clearCompletedButton": {
				"prototype": "native/ui/button.reel",
				"properties": {
					"element": {"#": "clear-completed"}
				},
				"listeners": [
					{
						"type": "action",
						"listener": {"@": "owner"},
						"capture": false
					}
				]
			}
		}
		</script>
	</head>
	<body>
		<div data-montage-id="mainComponent">

			<section id="todoapp">
					<header id="header">
						<h1>todos</h1>
						<form data-montage-id="newTodoForm">
							<input type="text" data-montage-id="newTodoField" id="new-todo" placeholder="What needs to be done?" autofocus="">
						</form>
					</header>
					<section data-montage-id="main" id="main">
						<input type="checkbox" data-montage-id="toggle-all" id="toggle-all">
						<label for="toggle-all">Mark all as complete</label>
						<ul data-montage-id="todo-list" id="todo-list">
							<li data-montage-id="todoView"></li>
						</ul>
					</section>
					<footer data-montage-id="footer" id="footer">
						<span id="todo-count"><strong data-montage-id="todo-count">0</strong> <span data-montage-id="todo-count-wording">items</span> left</span>
						<div data-montage-id="clear-completed-container" id="clear-completed-container">
							<button data-montage-id="clear-completed" id="clear-completed">Clear completed (<span data-montage-id="completed-count">0</span>)</button>
						</div>
					</footer>
				</section>
				<footer id="info">
					<p>Double-click to edit a todo</p>
					<p>Created with <a href="http://github.com/montagejs/montage">Montage</a> </p>
					<p>Source available at <a href="http://github.com/montagejs/todo-mvc">Montage-TodoMVC</a> </p>
					<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
				</footer>
		</div>
	</body>
</html>